<d-accordion
  class="menu"
  [data]="menu"
  (itemClick)="itemClick($event)"
  (menuToggle)="menuToggle($event)"
  [menuItemTemplate]="menutemplate"
  [itemTemplate]="itemtemplate"
  [noContentTemplate]="noContentTemplate"
  [loadingTemplate]="loadingTemplate"
></d-accordion>

<ng-template #menutemplate let-item="item">
  <div class="title-container">
    <span class="title-content">{{ item.title }}</span>
    <span class="operation-clear" *ngIf="item.needLoadChildren === false" (click)="clearChildrenData($event, item)"
      >reset
      <!--重置--></span
    >
    <span class="badge" *ngIf="item.children?.length">{{ item.children.length }}</span>
  </div>
</ng-template>
<ng-template #itemtemplate let-item="item">
  {{ item.title }}<span class="info">(Click Count: {{ item.clicktimes || '0' }})</span>
</ng-template>
<ng-template #noContentTemplate let-deepth="deepth">
  <li class="devui-accordion-item disabled">
    <div class="devui-accordion-item-title devui-over-flow-ellipsis disabled" [style.textIndent]="deepth * 20 + 'px'">
      Not available yet. Please wait.
      <!--尚未开放，敬请期待...-->
    </div>
  </li>
</ng-template>
<ng-template #loadingTemplate let-item="item">
  <li class="devui-accordion-item">
    <div class="loading"><span class="circle-spinner"></span> loading...<!--正在用力地加载中...--></div>
  </li>
</ng-template>
